<template>
    <div>
		<div class="container">
			<el-tabs v-model="activeName" type="card" @tab-click="tabClick">
				<el-tab-pane label="已就业信息" name="tab1">
					<el-card class="box-card">
						<div class="handle-box">
							<el-input v-model="keyword" clearable placeholder="姓名|身份证|手机号" class="handle-input mr10"></el-input>
							<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
							<el-button type="success" icon="el-icon-lx-add" @click="dialogToggle1">添加已就业</el-button>
							<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
						</div>
				 		<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectionChange">
							<el-table-column type="selection" width="55" align="center"></el-table-column>
							<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
							<el-table-column prop="name" label="姓名"></el-table-column>
							<el-table-column prop="phone" width="160px" label="手机号"></el-table-column>
							<el-table-column prop="idcard" width="170px" label="身份证"></el-table-column>
							<el-table-column prop="date" width="120px" label="就职日期"></el-table-column>
							<el-table-column prop="addr_txt" width="180px" label="就职地址"></el-table-column>
							<el-table-column prop="company" width="180px" label="就职公司"></el-table-column>
							<el-table-column prop="income" label="月均工资"></el-table-column>
							<el-table-column prop="labor" label="劳动合同"></el-table-column>
							<el-table-column prop="pension" label="企业养老"></el-table-column>
							<el-table-column prop="business" label="返乡意愿"></el-table-column>
							<el-table-column prop="employed" label="就业形式"></el-table-column>
							<el-table-column label="状态" width="140px" align="center">
							    <template slot-scope="scope">
									<el-select v-model="scope.row.status" style="width: 100px" @change="changeStatus(scope.row.id)">
									    <el-option
											v-for="item in $status"
											:key="item.value"
											:label="item.label"
											:value="item.value">
									    </el-option>
									</el-select>
							    </template>
							</el-table-column>
							<el-table-column prop="addtime" width="160" label="添加时间"></el-table-column>
							<el-table-column label="操作" width="180" align="center">
								<template slot-scope="scope">
								    <el-button type="text" class="mr10" icon="el-icon-edit" @click="editTable(scope.row.id)">编辑</el-button>
								    <el-popconfirm
								    	confirm-button-text='确定'
								    	cancel-button-text='取消'
								    	icon="el-icon-info"
								    	icon-color="red"
								    	@confirm="delRow(scope.row.id)"
								    	title="确定删除该信息？"
								    >
								    	<el-button slot="reference" type="text" icon="el-icon-delete" :id="'del' + scope.row.id" class="red">删除</el-button>
								    </el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-tab-pane>
				
				<el-tab-pane label="未就业信息" name="tab2">
					<el-card class="box-card">
						<div class="handle-box">
							<el-input v-model="keyword" clearable placeholder="姓名|身份证|手机号" class="handle-input mr10"></el-input>
							<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
							<el-button type="success" icon="el-icon-lx-add" @click="dialogToggle2">添加未就业</el-button>
							<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll">批量删除</el-button>
						</div>
						<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectionChange">
							<el-table-column type="selection" width="55" align="center"></el-table-column>
							<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
							<el-table-column prop="name" label="姓名"></el-table-column>
							<el-table-column prop="phone" width="160px" label="手机号"></el-table-column>
							<el-table-column prop="idcard" width="170px" label="身份证"></el-table-column>
							<el-table-column prop="employno" width="140px" label="未就业分类"></el-table-column>
							<el-table-column prop="unemployment" width="180" label="失业原因"></el-table-column>
							<el-table-column prop="wished" label="就业意愿"></el-table-column>
							<el-table-column prop="nowishreson" width="180px" label="无意愿原因">
								<template slot-scope="scope">
									<div>{{scope.row.nowishreson}}</div>
									<span v-if="scope.row.remark">备注:{{scope.row.remark}}</span>
								</template>
							</el-table-column>
							<el-table-column label="状态" width="140px" align="center">
								<template slot-scope="scope">
									<el-select v-model="scope.row.status" style="width: 100px" @change="changeStatus(scope.row.id)">
										<el-option
											v-for="item in $status"
											:key="item.value"
											:label="item.label"
											:value="item.value">
										</el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column prop="addtime" width="160" label="添加时间"></el-table-column>
							<el-table-column label="操作" width="180" align="center">
								<template slot-scope="scope">
									<el-button type="text" class="mr10" icon="el-icon-edit" @click="editTable2(scope.row.id)">编辑</el-button>
									<el-popconfirm
										confirm-button-text='确定'
										cancel-button-text='取消'
										icon="el-icon-info"
										icon-color="red"
										@confirm="delRow(scope.row.id)"
										title="确定删除该信息？"
									>
										<el-button slot="reference" type="text" icon="el-icon-delete" :id="'del' + scope.row.id" class="red">删除</el-button>
									</el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="培训意愿" name="tab3">
					<el-card class="box-card">
						<div class="handle-box">
							<el-input v-model="keyword" clearable placeholder="姓名|身份证|手机号" class="handle-input mr10"></el-input>
							<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
							<el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll3">批量删除</el-button>
						</div>
						<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" @selection-change="selectionChange">
							<el-table-column type="selection" width="55" align="center"></el-table-column>
							<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
							<el-table-column prop="name" label="姓名"></el-table-column>
							<el-table-column prop="training" label="培训意愿"></el-table-column>
							<el-table-column prop="addtime" label="添加时间"></el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<!-- <el-button type="text" class="mr10" icon="el-icon-edit" @click="editTable2(scope.row.id)">编辑</el-button> -->
									<el-popconfirm
										confirm-button-text='确定'
										cancel-button-text='取消'
										icon="el-icon-info"
										icon-color="red"
										@confirm="delRow3(scope.row.id)"
										title="确定删除该信息？"
									>
										<el-button slot="reference" type="text" icon="el-icon-delete" :id="'del' + scope.row.id" class="red">删除</el-button>
									</el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</el-tab-pane>
			</el-tabs>
			
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="pageIndex"
					:page-size="pageSize"
					:total="pageTotal"
					@current-change="pagination">
				</el-pagination>
			</div>
		</div>
		<vWorker1 ref="vWorker1" @dialogToggle1="dialogToggle1" @getEmployed="getEmployed"></vWorker1>
		<vWorker2 ref="vWorker2" @dialogToggle2="dialogToggle2" @getNoEmploy="getNoEmploy"></vWorker2>
    </div>
	
</template>

<script>
import vWorker1 from '../vPage/vWorker1.vue'
import vWorker2 from '../vPage/vWorker2.vue'
export default {
    name: 'Worker',
	components: {
		vWorker1,
		vWorker2
	},
    data() {
        return {
			activeName: 'tab1',
            keyword: '',
			date: '',
            tableData: [],
            dialog: false,
			delIds: [],
			pageIndex: 1,
			pageSize: 10,
			pageTotal: 0,
        };
    },
    created() {
		this.getEmployed()
    },
    methods: {
        getEmployed() {
			let t = this
			t.$apiPost('Employed/lists', {keyword: this.keyword, date: this.date, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
        },  
		getNoEmploy () {
			let t = this
			t.$apiPost('Employno/lists', {keyword: this.keyword, date: this.date, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
		},
		getTraining () {
			let t = this
			t.$apiPost('Training/lists', {keyword: this.keyword, pageIndex: this.pageIndex, pageSize: this.pageSize}).then(res => {
				if(res.code == 1) {
					this.tableData = res.data.list
				} else {
					this.$message.error(res.msg)
				}
				this.pageTotal = res.data.pageTotal
			})
		},
		tabClick (e) {
			this.pageIndex = 1
			this.tableData = []
			if(e.index == "0"){
				this.getEmployed()
			} else if(e.index == "1"){
				this.getNoEmploy()
			}else{
				this.getTraining()
			}
			this.activeName = e.name
		},
		dialogToggle1 (id) {
			this.$refs.vWorker1.id = id
			this.$refs.vWorker1.dialog = !this.$refs.vWorker1.dialog
		},
		dialogToggle2 (id) {
			this.$refs.vWorker2.id = id
			this.$refs.vWorker2.dialog = !this.$refs.vWorker2.dialog
		},
		changeStatus (id) {
			if(this.activeName == 'tab1'){
				this.$updateStatus('Index/updateStatus', {model: 'Employed', id: id});
			} else if(this.activeName == 'tab2'){
				this.$updateStatus('Index/updateStatus', {model: 'Employno', id: id});
			}
		},
		handleQuery () {
			this.pageIndex = 1
			if(this.activeName == 'tab1'){
				this.getEmployed()
			} else if(this.activeName == 'tab2'){
				this.getNoEmploy()
			}else{
				this.getTraining()
			}
		},
		editTable (id) {
			this.$apiPost('Employed/infos', {id: id}).then(res => {
				if(res.code == 1) {
					this.$refs.vWorker1.formData = res.data
					this.dialogToggle1()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		editTable2 (id) {
			this.$apiPost('Employno/infos', {id: id}).then(res => {
				if(res.code == 1) {
					this.$refs.vWorker2.formData = res.data
					this.dialogToggle2()
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		delRow (id) {
			this.$apiPost('Employed/delOne', {id: id}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getEmployed()
					this.$message(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		delRow2 (id) {
			this.$apiPost('Employno/delOne', {id: id}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getNoEmploy()
					this.$message(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		delRow3 (id) {
			this.$apiPost('Training/delOne', {id: id}).then(res => {
				if(res.code == 1) {
					this.pageIndex = 1
					this.getTraining()
					this.$message(res.msg)
				} else {
					this.$message.error(res.msg)
				}
			})
		},
		selectionChange(e){
			let ids = []
			if(e.length > 0) {
				for(let i in e){
					ids.push(e[i].id)
				}
				this.delIds = ids
			} else {
				this.delIds = e
			}
		},
		delAll () {
			if(this.delIds.length == 0) {
				return this.$message({
					message: '未选择删除信息!',
					type: 'warning'
				})
			}
			this.$confirm('是否删除选择的?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$apiPost('Employed/delAll', {ids: this.delIds}).then(res => {
					if(res.code == 1) {
						this.pageIndex = 1
						this.getEmployed()
						this.$message(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {         
			})
			
		},
		delAll2 () {
			if(this.delIds.length == 0) {
				return this.$message({
					message: '未选择删除信息!',
					type: 'warning'
				})
			}
			this.$confirm('是否删除选择的?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$apiPost('Employno/delAll', {ids: this.delIds}).then(res => {
					if(res.code == 1) {
						this.pageIndex = 1
						this.getNoEmploy()
						this.$message(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {         
			})
			
		},
		delAll3 () {
			if(this.delIds.length == 0) {
				return this.$message({
					message: '未选择删除信息!',
					type: 'warning'
				})
			}
			this.$confirm('是否删除选择的?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$apiPost('Training/delAll', {ids: this.delIds}).then(res => {
					if(res.code == 1) {
						this.pageIndex = 1
						this.getTraining()
						this.$message(res.msg)
					} else {
						this.$message.error(res.msg)
					}
				})
			}).catch(() => {         
			})
			
		},
		pagination (e) {
			this.pageIndex = e
			if(this.activeName == 'tab1') {
				this.getEmployed()
			} else if(this.activeName == 'tab2') {
				this.getNoEmploy()
			}else{
				this.getTraining()
			}
		}
    }
};
</script>
<style scoped>
.goNew{
	color: #2e6bd9;
	cursor: pointer;
}
.handle-box {
    margin-bottom: 20px;
}
.handle-select {
    width: 120px;
}
.handle-input {
    width: 200px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr5{
	margin-right: 1px;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
